<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>公告管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body class="childrenBody">
<!-- 查询条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
	<legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
	<form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form layui-form-pane">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">公告名称</label>
				<div class="layui-input-inline">
					<input type="text" name="title" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-label">创建人</label>
				<div class="layui-input-inline">
					<input type="text" name="opername" autocomplete="off" class="layui-input">
				</div>
			</div>
			<button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
			<button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
		</div>
	</form>
</blockquote>
<!-- 查询条件结束-->


<!-- 数据表格开始 -->
<div>
	<table class="layui-hide" id="noticeTable" lay-filter="noticeTable"></table>
	<div id="noticeToolBar" style="display: none;">
		<button type="button" lay-event="add" class="layui-btn layui-btn-sm layui-btn-normal"><span class="layui-icon layui-icon-addition"></span>添加公告</button>
		<button type="button" lay-event="batchDelete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>批量删除</button>
	</div>

	<div id="noticeRowBar" style="display: none;">
		<button type="button" lay-event="show" class="layui-btn layui-btn-sm "><span class="layui-icon layui-icon-about"></span>查看</button>
		<button type="button" lay-event="update" class="layui-btn layui-btn-sm layui-btn-normal"><span class="layui-icon layui-icon-refresh"></span>更新</button>
		<button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>删除</button>
	</div>
</div>

<!-- 数据表格结束 -->

<!--添加和修改的弹出层 开始-->
<div style="display: none;padding: 0.375rem" id="addOrUpdateDiv">
    <form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">公告标题</label>
            <div class="layui-input-block">
				<input type="hidden" name="id" />
                <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
       <div class="layui-form-item">
           <label class="layui-form-label">公告内容</label>
           <div id="content" name="content" style="margin: 50px 0 50px 0">
           </div>
       </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit" id="doSubmit"><span class="layui-icon layui-icon-add-1"></span>确定</button>
                <button type="reset"  class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
            </div>
        </div>
    </form>
</div>
<!--添加和修改的弹出层 结束-->

<!--查看弹出层 结束-->

<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/api.js" charset="utf-8"></script>
<script type="text/javascript">
	layui.use(['jquery','form','table','layer','laydate','wangEditor'],function(){
		var $=layui.jquery;
		var form=layui.form;
		var table=layui.table;
		var layer=layui.layer;
		var laydate=layui.laydate;
		var wangEditor = layui.wangEditor;


		//加载 数据
		var tableIns=table.render({
			elem: '#noticeTable'
			,url: api+'notice/loadAllNotice'
			,toolbar: '#noticeToolBar' //开启头部工具栏，并为其绑定左侧模板
			,title: '公告数据表'
			,height:'full-240'
			,page: true
			,cols: [ [
			    {type: "checkbox",  fixed: "left"},
				{field: 'id', title: 'ID', align: "center"},
				{field: 'title',  title: '公告标题', align: "center"},
				{field: 'createtime',  title: '发布时间', align: "center"},
				{field: 'opername',  title: '发布人', align: "center"},
				{title: '操作', templet: '#noticeRowBar', fixed: "right", align: "center"}

			] ]
		});

		//模糊查询
		form.on("submit(doSearch)",function(data){
		   var params= $("#searchFrm").serialize();
			//执行搜索重载
		   table.reload('noticeTable', {
			   page: {
				   curr: 1
			   }
			   ,url:api+'notice/loadAllNotice?'+params
		   });
		   return false;
		});
		
		 

		//监听工具条的事件
		table.on("toolbar(noticeTable)",function(obj){
			switch(obj.event){
				case 'batchDelete':
					batchDelete();
					break;
				case 'add':
					openAddNotice();
					break;
			};
		});

		//监听行工具条的事件
		table.on("tool(noticeTable)",function(obj){
			var data = obj.data; //获得当前行数据
			switch(obj.event){
				case 'update':
					updateInfo(data);
					break;
				case 'delete':
					deleteInfo(data);
					break;
				case 'show':
					showInfo(data);
					break;
			};
		});


		//打开添加公告的弹层
		var mainIndex;
		var url;  //动态的url
		function openAddNotice(){
			mainIndex=layer.open({
				type:1,
				title:'添加公告',
				content:$("#addOrUpdateDiv"),
				area:['800px','600px'],
				success:function(index){
					url=api+"notice/addNotice";
					//重置表单
					$("#dataFrm")[0].reset();
					editor.txt.html("");
				}
			});	
		}
		

	
		//打开修改公告的弹层
		var mainIndex;
		var url;  //动态的url
		function updateInfo(data){
			mainIndex=layer.open({
				type:1,
				title:'修改公告',
				content:$("#addOrUpdateDiv"),
				area:['800px','600px'],
				success:function(index){
					url=api+"notice/updateNotice";
					//转载数据表格
					form.val("dataFrm",data);
					//设置富文本的内容
					editor.txt.html(data.content);
				}
			});	
		}
		
		//提交数据
		form.on("submit(doSubmit)",function(data){
			var params= $("#dataFrm").serialize();
			var content = editor.txt.html();
			params += "&content="+content;
			$.post(url,params, function(res){
			layer.msg(res.msg);
			if(res.code==200){
				tableIns.reload();
			}
			layer.close(mainIndex);
			
		})
			//alert(params);
			return false;
		})
		
	

		function showInfo(data){
			var title = data.title;
			var noticeTime = data.createtime;
			var content = data.content;
			var opername = data.opername;
			var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
				'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
				'<div style="font-size: 12px">' + content + '</div>\n' +
				'</div>\n';
			parent.layer.open({
				type: 1,
				title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">发布时间: '+noticeTime+'  发布人: '+opername+'</span>',
				area: '800px;',
				shade: 0.8,
				btn: ['关闭'],
				btnAlign: 'c',
				moveType: 1,
				content:html,
			});
		}
		


		//删除
		function deleteInfo(data){
			layer.confirm('你确定要删除这条数据吗?', {icon: 3, title:'提示'}, function(index){
				$.post(api+"notice/deleteNotice",{id:data.id},function(res){
					if(res.code==200){
						tableIns.reload();
					}
					layer.msg(res.msg);
				})
				layer.close(index);
			});
		}

		//批量删除
		function batchDelete() {
			//得到选中的行
			var checkStatus = table.checkStatus('noticeTable');
			//获取选中行的长度
			var length =checkStatus.data.length;
			if (length>0){
				var data =  checkStatus.data; //获取选中行的数据
				var ids = "";
				layer.confirm('你确定要删除这些数据?', {icon: 3, title:'提示'}, function(index){
				});
				$.each(data,function (index,item) {
					if (index==0) {
						ids += "ids=" + item.id;
					}else {
						ids += "&ids=" + item.id;
					}
				})
				$.post(api+"notice/batchDeleteNotice",ids,function (res) {
					if (res.code==200){
						tableIns.reload();
					}
					layer.msg(res.msg)
				})
				layer.close(index);
			}else {
				layer.msg("请选中操作行")
			}
		}
		
		//富文本编辑器初始化
		var editor = new wangEditor('#content');
		editor.customConfig.uploadImgServer = "../api/upload.json";
		editor.customConfig.uploadFileName = 'image';
		editor.customConfig.pasteFilterStyle = false;
		editor.customConfig.uploadImgMaxLength = 5;
		editor.customConfig.uploadImgHooks = {
		    // 上传超时
		    timeout: function (xhr, editor) {
		        layer.msg('上传超时！')
		    },
		    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
		    customInsert: function (insertImg, result, editor) {
		        console.log(result);
		        if (result.code == 1) {
		            var url = result.data.url;
		            url.forEach(function (e) {
		                insertImg(e);
		            })
		        } else {
		            layer.msg(result.msg);
		        }
		    }
		};
		editor.customConfig.customAlert = function (info) {
		    layer.msg(info);
		};
		editor.create();
	});
</script>
</body>
</html>